<template>
	<view class="container">
		<view class="menu" >
			<view class="local">
       	 	<up-picker 
			:show="showLocal" 
			:columns="columns" 
			keyName="label"
			@cancel="onCancelPickerLocal"
			@confirm="onConfirmPickerLocal"
			closeOnClickOverlay
			></up-picker>
			<up-button   type="primary"  icon="map" :text="serverName" @click="showLocal = true"></up-button>
			</view>

			<view class="mucket_type">
       	 	<up-picker 
			:show="showDataType" 
			:columns="mucket_type" 
			keyName="label"
			@cancel="onCancelPickerDataType"
			@confirm="onConfirmPickerDataType"
			closeOnClickOverlay
			></up-picker>
			<up-button   type="primary"  icon="order" :text="dataType" @click="showDataType = true"></up-button>
			</view>
		</view>
		<view class="content">
			<view class="charts-box">
      <qiun-data-charts type="line"  :chartData="chartsDataColumn1" />
    </view>
		</view>
		<view>已上为演示数据</view>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import {ServerRange,MarketDataType} from '../../constant/AppConfig'
const serverName  = ref("电信1")
const dataType  = ref("祝福价格趋势")
const showLocal = ref(false)
const showDataType = ref(false)
const columns = reactive([
   ServerRange
]);
const mucket_type =reactive([
	MarketDataType
])
	const onCancelPickerLocal=function(){
             showLocal.value=false;
	}

	const onConfirmPickerLocal=function(e:any){
		showLocal.value=false;
		console.log("e.value[0]?.label",e.value[0]?.label)
		serverName.value =  e.value[0]?.label
	}

	const onCancelPickerDataType=function(){ 
		showDataType.value=false;
}

const onConfirmPickerDataType=function(e:any){
	showDataType.value=false;
	dataType.value=  e.value[0]?.label
}

const categories=function(){
	let arr=[];
	for(let i=0;i<15;i++){
        arr.push((i+1).toString())
	}
	return arr;
}


const prices =function(){
	let arr=[];
	for(let i=0;i<15;i++){
        arr.push(Math.random().toFixed(2))
	}
	return arr;
}

const chartsDataColumn1= {
        categories: categories(),
        series: [
          {
            name: "15日祝福价格趋势",
            data: prices(),
          },
        ],
      }
</script>

<style>
page{
		background-color: #f6f6f6;
	}
.container {
	display: flex;
	flex-direction: column;
}
.menu{
		display: flex;
		background-color: white;
	border-radius: 6px;
	height: 50px;
	align-items: center;
		justify-content: space-around;
		}
		.local{
			
		}
		.content{
			margin-top: 18px;
			background-color: white;
			border-radius: 6px;
			height: 100%;
		}
</style>
